<template>
	<view>
		<view class="evalu">
			<view class=" xflex-x xpt40 xpb40 xbb8D">
				<input class="" v-model="info.title" type="text" placeholder="标题">

			</view>

			<view class="">
				<u--textarea v-model="info.content" placeholder="请输入内容" border="bottom"></u--textarea>
			</view>

			<view class="imgs xmt24">

				<view class="img pr" v-for="(item,index) in labelData.imglist" :key="index">
					<image class="img" v-if="item.type == 'img'" :src="item.fullurl" mode=""></image>

					<video class="img" v-if="item.type == 'mp4'" :src="item.fullurl"></video>
					<image class="pa shanchu" @click="deleti(index)" src="/static/image/car/shanchux.png" mode="">
					</image>
				</view>
				<image class="img" @click="chooseImage()" src="/static/image/mine/img.png" mode=""></image>
				<image class="img" @click="chooseVideo()" src="/static/image/mine/video.png" mode=""></image>
			</view>
		</view>



		<view class="evalu tag">
			<view class="tag-title">
				添加标签
			</view>

			<view class="">
				<view class="xmt10 tag-ps">
					<view class="tag-pan xflex-x-between xmb10" v-for="(item,index) in info.label" :key="index">
						<view class="">
							#{{item}}
						</view>
						<image class="tag-dele xml24" @click="deletelab(index)" src="/static/image/car/spanx.png" mode=""></image>
					</view>
				</view>
				<view class="xflex-x xmt10">

					<view class="input-box" v-if="labelData.show">
						<span class="input-box__label">{{labelData.value}}</span>
						<input class="input-box__input" @blur="onBlur" v-model="labelData.value" type="text" />
					</view>
					<image v-else @click="labelData.show = true" class="tag-add" src="/static/image/car/addx.png" mode=""></image>
				</view>
			</view>
		</view>



		<view class="evalu xflex-x-between xmt10">
			<view class="xflex-x" @click="getlocatch()">
				<image class="address" src="/static/image/car/addressx.png" mode=""></image>
				<view class="addressname">
					点击选择位置
				</view>
			</view>
			<view class="addressnames">
				{{info.address}}
			</view>
		</view>

		<view class="btn" @click="sub()">
			提交
		</view>


	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';

	import {
		uploadFile,
		addarticle
	} from "@/network/home.js"
	let value = ref(4)
	let count = ref(5)


	let info = reactive({
		title: '',
		content: '',
		images: [],
		file: '',
		label: [],
		address: ''
	})
	let labelData = reactive({
		value: '',
		show: false,
		imglist: []
	})

	const onBlur = () => {
		
		info.label.push(labelData.value)
		labelData.value = ''
		labelData.show = false
	}


	// 上传视频
	const chooseVideo = () => {
		uni.chooseVideo({
			success: async function(chooseVideoRes) {
				const tempFilePath = chooseVideoRes.tempFilePath;
				const result = await uploadFile(tempFilePath);
				labelData.imglist.push({
					...result.data,
					type: 'mp4'
				})
				// 这里获取到了视频的临时文件路径，可以进行后续的上传操作  
			}
		});
	}


	// 上传图片

	const chooseImage = () => {
		uni.chooseImage({
			success: async function(chooseImageRes) {
				const lists = chooseImageRes.tempFilePaths;
				let arr = []
				for (let i = 0; i < lists.length; i++) {
					const result = await uploadFile(lists[i]);
					console.log(result);

					labelData.imglist.push({
						...result.data,
						type: 'img'
					})
				}
			}
		});
	}


	// 删除
	const deleti = (index) => {

		console.log(index);
		labelData.imglist.splice(index, 1)
	}
	
	// 删除标签
	const deletelab = (index) =>{
		info.label.splice(index,1)
	}
	// 选择地址
	const getlocatch = () =>{
		uni.chooseLocation({
			success(res) {
				console.log(res);
				info.address = res.name
				// counter.enterInfo.lat = res.latitude
				// counter.enterInfo.lng = res.longitude
				// counter.enterInfo.address = res.address
				// counter.enterInfo.addressname  = res.name
			}
		})
	}
	
	const sub = () =>{
		labelData.imglist.forEach(item=>{
			console.log(item);
			info.images.push(item.url)
		})
		addarticle(info).then(res=>{
			uni.showToast({
				title:'添加成功'
			})
			uni.navigateBack()
			
		})
	}
	
</script>


<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style scoped lang="scss">
	.evalu {
		background-color: #fff;
		padding: 38rpx 36rpx;
		box-sizing: border-box;
	}


	.imgs {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}

	.img {
		width: 214rpx;
		height: 214rpx;
		border-radius: 12rpx;
	}

	.shanchu {
		width: 37rpx;
		height: 36rpx;
		right: 0;
	}


	.btn {
		width: 630rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		margin: 30rpx auto;
	}

	.tag {
		margin-top: 10rpx;

		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
		}
		
		&-ps {
			display: flex;
			flex-wrap: wrap;
		}

		&-pan {
			// min-width: 184rpx;
			height: 52rpx;
			background: #EEEEEE;
			border-radius: 10rpx;

			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;

			line-height: 53rpx;
			padding: 0 18rpx;
			box-sizing: border-box;
			margin-right: 10rpx;


		}

		&-dele {
			width: 24rpx;
			height: 24rpx;
		}

		&-add {
			width: 116rpx;
			height: 52rpx;
		}

		&-ipt {
			// width: 116rpx;
			min-width: 116rpx;
			height: 52rpx;
			border: 1rpx solid #eee;
			border-radius: 12rpx;

		}
	}


	.input-box {

		display: inline-flex;

		align-items: center;

		box-sizing: border-box;

		position: relative;

		border: 1px solid #eee;

		border-radius: 5px;

		height: 52rpx;

		min-width: 116rpx;

		/* font family is very important */

		font-family: Arial, 'microsoft yahei';

		font-size: 14px;

	}

	.input-box__label {

		display: inline-block;

		font-size: inherit;

		line-height: normal;

		visibility: hidden;

		font-family: inherit;

		padding: 0 10px;

	}

	.input-box__input {

		box-sizing: border-box;

		position: absolute;

		display: inline;

		font-size: inherit;

		font-family: inherit;

		line-height: normal;

		border-radius: inherit;

		height: 100%;

		width: 100%;

		outline: 0;

		border: 0;

		margin: 0;

		padding: 0 10px;

	}

	.address {
		width: 32rpx;
		height: 32rpx;
		margin-right: 16rpx;
	}

	.addressname {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #62BAF8;
	}

	.addressnames {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #999999;
	}
</style>